<template>
  <el-card class="box-card" style="margin-bottom:20px">
    <div slot="header" class="clearfix" v-if="$route.query.id">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>学科列表</el-breadcrumb-item>
        <el-breadcrumb-item>{{$route.query.name}}</el-breadcrumb-item>
        <el-breadcrumb-item>标签列表</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 表单查询 -->
    <el-form ref="form" :model="form" label-width="80px">
      <el-row :gutter="20">
        <el-col :span="6">
           <el-form-item label="标签名称">
              <el-input v-model="form.tagName" size="small"></el-input>
            </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="状态">
            <el-select v-model="form.state" placeholder="请选择状态" style="display:inline-block" size="small">
              <el-option label="开启" value="1"></el-option>
              <el-option label="屏蔽" value="0"></el-option>
            </el-select>
            <el-button size="small" type="primary" style="margin-left:20px" @click="clickSearch">搜索</el-button>
            <el-button size="small" @click="reset">清除</el-button>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-button type="text" v-if="$route.query.id" @click="returntSubject" style="margin-left:150px">←-返回学科管理</el-button>
          <el-button style="float: right" size="small" type="success" @click="addText()"><i class="el-icon-edit"></i> 新增标签</el-button>
        </el-col>
      </el-row>
    </el-form>
    <el-alert
    style="margin:0px 0px 10px 0px"
          type="info"
          class="alert"
          :closable="false"
          show-icon
        >当前共计查询到 {{tatal_count}} 条数据
      </el-alert>
    <!-- table列表 -->
    <el-table
      :data="tableData"
      fit
      highlight-current-row
      style="width: 100%">
      <el-table-column
        type="index"
        label="序号"
        align="center"
        width="230">
      </el-table-column>
      <el-table-column
        prop="subjectName"
        label="所属学科"
        align="center"
        width="230">
      </el-table-column>
      <el-table-column
        prop="tagName"
        label="标签名称"
        align="center"
        width="230">
      </el-table-column>
      <el-table-column
        prop="username"
        label="创建者"
        align="center"
        width="230">
      </el-table-column>
      <el-table-column align="center" label="创建日期" width="250">
          <template slot-scope="scope">
            <span>{{scope.row.addDate | parseTimeByString}}</span>
          </template>
        </el-table-column>
      <el-table-column align="center" label="状态" width="250">
          <template slot-scope="scope">
            <span v-if="scope.row.state==0">已禁用</span>
            <span v-else-if="scope.row.state==1">已启用</span>
          </template>
        </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        width="250">
        <template slot-scope="scope">
          <el-button
            @click="tagAble(scope.row)"
            type="text"
            size="small">
            {{scope.row.state==1 ? '禁用':'启用'}}
          </el-button>
          <el-button
            @click="modifyTag(scope.row)"
            type="text"
            :disabled="scope.row.state==1"
            :style="scope.row.state==1 ? 'color:#ccc':''"
            size="small">
            修改
          </el-button>
          <el-button
            @click="deleteRow(scope.row)"
            type="text"
            :disabled="scope.row.state==1"
            :style="scope.row.state==1 ? 'color:#ccc':''"
            size="small">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination" style="float:right;">
      <div class="pages">
        <el-pagination
        style="margin:10px 0px"
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="form.page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tatal_count">
        </el-pagination>
      </div>
    </div>
    <!-- 弹出对话框 新增标签 修改标签 -->
    <el-dialog title="新增标签" :visible.sync="hdialogForm">
      <el-form :model="dialogForm" ref="dialogForm" :rules="rules">
        <el-form-item label="标签名称" prop="tagName">
          <el-input v-model="dialogForm.tagName" autocomplete="off" maxlength="16"></el-input>
        </el-form-item>
        <el-form-item label="学科" v-if="!$route.query.id">
          <el-select style="width:100%;" v-model="dialogForm.subjectID" placeholder="请选择学科">
            <el-option v-for="item in subjectsList" :key="item.id" :label="item.subjectName" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="hdialogForm = false">取 消</el-button>
        <el-button type="primary" @click="hAddtag()">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 修改标签 -->
    <Dialog ref="editTag" :formData="formData" :queryID="queryID" :subjectsList="subjectsList" @updata="hedit"></Dialog>
  </el-card>
</template>

<script>
// 引入学科列表
import { list } from '@/api/hmmm/subjects'
import Dialog from '../components/tags-add'
import { list as getlist, add, changeState, remove } from '@/api/hmmm/tags'
// 引入时间过滤器
export default {
  name: 'tabs',
  components: {
    Dialog
  },
  data () {
    return {
      queryID: null, // 传递给子组件自身的route.query
      formData: { // 传递给子组件的值
        id: null,
        subjectID: null, // 学科id
        tagName: null // 目录名称
      },
      rules: {
        tagName: [
          { required: true, message: '请输入标签名称', trigger: 'blur' }
        ]
      },
      hdialogForm: false, // 控制是否弹出对话框
      dialogForm: {
        subjectID: null, // 学科id
        tagName: null // 目录名称
      },
      subjectsList: [], // 获取的学科列表
      form: {
        page: 1,
        pagesize: 10,
        tagName: null, // 目录名称
        state: null, // 状态
        subjectID: null // 携带的学科id
      },
      tableData: [], // 数据列表
      tatal_count: null // 总数据个数
    }
  },
  created () {
    this.getTags()
    this.getSubjectList()
  },
  methods: {
    handleSizeChange (val) { // 分页组件方法-改变size
      this.form.page = 1
      console.log(val)
      this.form.pagesize = val
      this.getTags()
    },
    handleCurrentChange (val) {
      console.log(val)
      this.form.page = val
      this.getTags()
    }, // 分页组件实现实现跳页
    async getTags () {
      if (this.$route.query.id) {
        this.form.subjectID = Number(this.$route.query.id)
      }
      const res = await getlist(this.form)
      console.log(res)
      this.tableData = res.data.items
      this.tatal_count = res.data.counts
    },
    // 点击搜索
    clickSearch () {
      this.form.page = 1
      this.form.pagesize = 10
      this.getTags()
    },
    // 返回到学科管理
    returntSubject () {
      this.$router.push('list')
    },
    addText () {
      this.hdialogForm = true
    },
    // 标签添加
    hAddtag () {
      this.$refs.dialogForm.validate(async (valid) => {
        if (valid) {
          try {
            if (this.$route.query.id) {
              this.dialogForm.subjectID = Number(this.$route.query.id)
            }
            const res = await add(this.dialogForm)
            console.log('标签添加', res)
            this.$message.success('操作成功')
            this.dialogForm.subjectID = null
            this.dialogForm.tagName = null
            this.hdialogForm = false
            this.getTags()
            // location.reload()
            // this.$router.go(0)
          } catch (err) {
            console.log(err)
            this.$message.error('操作失败')
            this.hdialogForm = false
          }
        }
      })
    },
    // 获取学科列表
    async getSubjectList () {
      const res = await list({ page: 1, pagesize: 100 })
      console.log(res)
      this.subjectsList = res.data.items.map(({ id, subjectName }) => ({ id, subjectName }))
      console.log(this.subjectsList)
    },
    // 重置
    reset () {
      this.form.tagName = null
      this.form.state = null
      this.form.page = 1
      this.form.pagesize = 10
      this.getTags()
    },
    // 禁用 启用
    tagAble (row) {
      if (row.state === 1) {
        this.$confirm('您确认更改当前状态为禁用吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          const from = {
            id: row.id,
            state: 0
          }
          await changeState(from)
          this.getTags()
          this.$message({
            type: 'success',
            message: '禁用成功!'
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消禁用'
          })
        })
      } else {
        this.$confirm('您确认更改当前状态为启用吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          const from = {
            id: row.id,
            state: 1
          }
          await changeState(from)
          this.getTags()
          this.$message({
            type: 'success',
            message: '启用成功!'
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消启用'
          })
        })
      }
    },
    // 修改
    modifyTag (row) {
      console.log(row)
      // 传值
      this.formData.id = row.id
      this.formData.subjectID = row.subjectID
      this.formData.tagName = row.tagName
      console.log(this.formData)
      if (this.$route.query.id) {
        this.queryID = this.$route.query.id.toString()
        console.log(this.queryID)
      }
      // 显示弹出层子组件
      this.$refs.editTag.dialogFormV()
    },
    // 子组件确定修改进行更新
    hedit (isqd) {
      console.log(isqd)
      if (isqd === 1) {
        this.getTags()
      } else {
      }
    },
    // 删除
    deleteRow (row) {
      this.$confirm('此操作将永久删除该标签，是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await remove(row)
        this.getTags()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>

<style scoped lang='scss'>
  .el-button{
    display: inline-block;
  }
</style>
